<template>
  <h1>数组侦听</h1>

  <button @click="addElem()">点击添加元素</button>
  <ul>
    <li v-for="item of names">{{ item }}</li>
  </ul>
  <hr>

  <h2>案例，将第二个列表添加到第一个列表中</h2>

  <button @click="concatElem()">点击添加元素</button>
  <ul>
    <li v-for="item of quotes1">{{ item }}</li>
  </ul>
  <div>-----------------------------------------</div>
  <ul>
    <li v-for="item of quotes2">{{ item }}</li>
  </ul>

</template>

<script>
export default {
  data() {
    return {
      names: ["张三", "李四", "王五"],
      quotes1: ['予力众生，成就不凡。', '山川同一色，浩若涉大荒。', '你不一定逆风翻盘，但请一定向阳而生。'],
      quotes2: ['对于我们的幸福来说，别人的看法在本质上来讲并不十分重要。', '我从来不相信什么懒洋洋的自由，我向往的自由是通过勤奋和努力实现的更广阔的人生，那样的自由才是珍贵的、有价值的；我相信一万小时定律，我从来不相信天上掉馅饼的灵感和坐等的成就。做一个自由又自律的人，靠势必实现的决心认真地活着。']
    }
  },
  methods: {
    addElem() {
      // 使用 push 方法，向数组添加元素后，还能直接引起 UI 的动态更新
      // 以下是可以引起数组动态更新的方法：
      /*
      * push()
      * pop()
      * shift()
      * unshift()
      * splice()
      * sort()
      * reverse()
      * */
      this.names.push("赵六");
      // 下列方法不会引起数组动态更新
      /*
      * concat()
      * slice()
      * filter()
      * */
    },
    // concat 方法不会更新原数组，而是返回一个添加后的新数组
    // 可以将新数组重新赋值给原数组，实现原数组的更新，从而实现 UI 自动更新
    concatElem() {
      this.quotes1 = this.quotes1.concat(this.quotes2);
    }
  }
}
</script>
